<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>人力资源管理系统</title>
	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" />
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="img/css/ie.css" type="text/css" media="screen" />
	<script src="img/js/html5.js"></script>
	<![endif]-->

	<script src="../lib/vue.js"></script>
    <script src="../lib/axios.js"></script>
	<script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="../js/hideshow.js" type="text/javascript"></script>
	<script src="../js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../js/jquery.equalHeight.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function() 
    	{ 
      	  $(".tablesorter").tablesorter(); 
   	 } 
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
<script type="text/javascript">
setInterval(function() {
    var now = (new Date()).toLocaleString();
    $('.current-time').text(now);
}, 1000);
</script>

</head>


<body>

	<header id="header">
		<hgroup>
			<h1 class="site_title"><a href="#">人力资源管理系统</a></h1>
			<h2 class="section_title"></h2><div class="btn_view_site"><a href="login.html">注销</a></div>
		</hgroup>
	</header> <!-- end of header bar -->
	
	<section id="secondary_bar">
		<div class="user">
			<p id="staff"></p>
			<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
		</div>
		<div class="breadcrumbs_container">
			<article class="breadcrumbs"><a href="index.html">系统管理中心</a> <div class="breadcrumb_divider"></div> <a class="current">人员信息查看</a></article>
			<div class="current-time"></div>
		</div>
	</section><!-- end of secondary bar -->

	<aside id="sidebar" class="column">
	<h3>人员管理</h3>
	<ul class="toggle">
		<li class="icn_new_article"><a href="lecadd.html">人员信息录入</a></li>
		<li class="icn_categories"><a href="leclist.html">人员信息查看</a></li>
		
	</ul>

		<h3>应聘信息管理</h3>
		<ul class="toggle">
			<li class="icn_new_article"><a href="hireinfo.html">应聘信息录入</a></li>
			<li class="icn_see_onlineUser"><a href="rencaiku.html">应聘信息查看</a></li>
			<li class="icn_categories"><a href="approval.html">应聘信息审核</a></li>
		</ul>

		<h3>公告管理</h3>
		<ul class="toggle">
			<li class="icn_new_article"><a href="notice_add.html">公告添加</a></li>

			<li class="icn_categories"><a href="notice_edit.html">公告编辑</a></li>

			<li class="icn_see_onlineUser"><a href="notice_check.html">公告查看</a></li>



		</ul>
	
	
	
	
	<footer>
		
	</footer>
</aside><!-- end of sidebar -->

	<section id="main" class="column">
	<div id="app">	
		<article class="module width_full">
		<header ><h3 class="tabs_involved">人员信息查看</h3>
		<div class="btn" >
		<button class="next"  @click="nextPage()">后一页</button>
            <button class="prev"  @click="prevPage()">前一页</button>
            
        </div>
		</header>
		<div class="tab_container"  >
			<div id="tab1" class="tab_content" >
				<table class="tablesorter" cellspacing="0" style="margin:0" > 
					<thead> 
						<tr>  
						    <th style="width:200px;">姓名</th>		    			
							<th style="width:200px;">员工ID</th>
							<th style="width:100px;">性别</th>
							<th style="width:260px;">出生日期</th>
							<th style="width:120px;">是否管理员</th>
							<th style="width:200px;">简介</th>
							<th style="width:200px;">职位</th>
							<th style="width:200px;">执行操作</th>		
						</tr> 
					</thead>
					<tbody>	
						<tr class="rowItem" v-for="item in items">
			    				<td>{{item.username}}</td> 
			    				<td>{{item.id}}</td> 
			    				<td>{{item.sex == "1"?"男":"女"}}</td>
			    				<td>{{item.strBirth}}</td> 
								<td>{{item.isadmin == "1"?"是":"否"}}</td>
								<td>{{item.content}}</td>
								<td>{{item.position}}</td>
			    				<td><input type="image" src="../images/icn_edit.png" style="cursor: pointer;" title="Edit" id="edit" v-on:click="showDetail(item)" ><input type="image" src="../images/icn_trash.png" style="cursor: pointer;" title="Delete" id="delete" v-on:click="deleteUser(item.id)"></td>
						<!-- </tr> -->
					
						<!-- <tr> -->
						
						</tr>
				
					</tbody>
				</table>
			</div><!-- end of #tab1 -->
			
			<div id="tab2" class="tab_content">

			</div><!-- end of #tab2 -->
			
		</div><!-- end of .tab_container -->
		
		</article><!-- end of content manager article -->
	</div>
	<div class="spacer"></div>
	</section>



	 <script>
    /**
     * 请求数据
     */
    const vm = new Vue({
        el: "#app",
        data: {
            items: [],
            totalNum: 0,
            currentPage: 0,
            totalPage: 0,
        },
        created: function() {
            var that = this;
            axios.get("http://localhost:8080/javaWeb/listuser.action").then(function(res) {
                if (res.data.status === "1002") {
                    that.items = res.data.data;
                    that.totalNum = res.data.totalNumber;
                    //让dom结构渲染完之后在执行下面的goPage()方法
                    that.$nextTick(function() {that.goPage() });
                    // console.log(res.data);
                } else {
                    console.log("服务器通讯异常。");
                }
            }).catch(function(e) {
                console.log(e);
            })
        },
        methods: {
            goPage: function(pno) {
                // console.log(this.totalNum);
                pno = pno || 1;
                let pageSize = 9;
                this.totalPage = Math.ceil(this.totalNum / pageSize);
                // console.log(this.totalPage);
                this.currentPage = pno;
                let startRow = (this.currentPage - 1) * pageSize + 1;
                let endRow = this.currentPage * pageSize;
                endRow = (endRow > this.totalNum) ? this.totalNum : endRow;
                // console.log(startRow + "开始  " + endRow + "结束");
                // 遍历显示数据实现分页
                let rows = document.querySelectorAll(".rowItem");
                // console.log(rows);
                for (let i = 1; i <= this.totalNum; i++) {
                    if (i >= startRow && i <= endRow) {
                        rows[i - 1].style.display = "table-row";
                    } else {
                        rows[i - 1].style.display = "none";
                    }
                }
            },
            nextPage: function() {
            	
                if (this.currentPage == this.totalPage) {
                    alert("当前已经是最后一页");
                } else {
                    this.currentPage++;
                    this.goPage(this.currentPage);
                }
            },
            prevPage: function() {
                if (this.currentPage == 1) {
                    alert("当前已经是第一页");
                } else {
                    this.currentPage--;
                    this.goPage(this.currentPage);
                }
            },
            // 显示详情页面
            showDetail: function(user) {
                console.log(user);
                localStorage.setItem("detailUser", JSON.stringify(user));
                location.href="staff_detail.html";
            },

            //删除用户
            deleteUser: function(id) {
                let that = this;
                let r = confirm("是否确定删除？");
                if (r) {
                    axios.get("http://localhost:8080/javaWeb/deleteuser.action?id=" + id).then(function(res) {
                        if (res.data.status == "1002") {
                            alert("删除成功");
                            //此时刷新页面
                            location.href="leclist.html";
                        }
                    }).catch(function(err) {
                        console.log(err);
                    });
                }
            },

        }
    });
    </script>

	<script>

        let staff = document.getElementById("staff");

        $(staff).text(localStorage.getItem("username"));

	</script>


</body>

</html>